<link rel="stylesheet" href="themes/insdep/easyui_plus.css">

<br/><br/>
<h3>标准表格样式</h3>
<br/><br/>

<table class="table table-celled">
  <thead>
    <tr><th>Header</th>
    <th>Header</th>
    <th>Header</th>
  </tr></thead>
  <tbody>
    <tr>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
    </tr>
    <tr>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
    </tr>
    <tr>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
    </tr>
  </tbody>
  <tfoot>
	<tr>
      <th colspan="3">
        Footer
      </th>
    </tr>
  </tfoot>
</table>


<br/><br/>
<h3>表格样式二</h3>
<br/><br/>



<table class="table table-definition">
      <thead>
        <tr>
          <th>Class Name</th>
          <th>Size</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Mini</td>
          <td>35px</td>
        </tr>
        <tr>
          <td>Tiny</td>
          <td>80px</td>
        </tr>
        <tr>
          <td>Small</td>
          <td>150px</td>
        </tr>
        <tr>
          <td>Medium</td>
          <td>300px</td>
        </tr>
        <tr>
          <td>Large</td>
          <td>450px</td>
        </tr>
        <tr>
          <td>Big</td>
          <td>600px</td>
        </tr>
        <tr>
          <td>Huge</td>
          <td>800px</td>
        </tr>
        <tr>
          <td>Massive</td>
          <td>960px</td>
        </tr>
      </tbody>
    </table>


<br/><br/>
<h3>表格样式三</h3>
<br/><br/>




<table class="table table-definition">
  <thead>
    <tr><th></th>
    <th>Arguments</th>
    <th>Description</th>
  </tr></thead>
  <tbody>
    <tr>
      <td>reset rating</td>
      <td>None</td>
      <td>Resets rating to default value</td>
    </tr>
    <tr>
      <td>set rating</td>
      <td>rating (integer)</td>
      <td>Sets the current star rating to specified value</td>
    </tr>
</tbody></table>



<br/><br/>
<h3>表格样式四</h3>
<br/><br/>


    <table class="table table-celled table-definition">
  <thead>
    <tr>
      <th></th>
      <th>Name</th>
      <th>Registration Date</th>
      <th>E-mail address</th>
      <th>Premium Plan</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <input type="checkbox">
      </td>
      <td>John Lilki</td>
      <td>September 14, 2013</td>
      <td>jhlilk22@yahoo.com</td>
      <td>No</td>
    </tr>
    <tr>
      <td>
        <input type="checkbox">
      </td>
      <td>Jamie Harington</td>
      <td>January 11, 2014</td>
      <td>jamieharingonton@yahoo.com</td>
      <td>Yes</td>
    </tr>
    <tr>
      <td>
        <input type="checkbox">
      </td>
      <td>Jill Lewis</td>
      <td>May 11, 2014</td>
      <td>jilsewris22@yahoo.com</td>
      <td>Yes</td>
    </tr>
  </tbody>
  <tfoot class="full-width">
    <tr>
      <th></th>
      <th colspan="4">
        Footer
      </th>
    </tr>
  </tfoot>
</table>

<br/><br/>
<h3>复杂的排版表格</h3>
<br/><br/>


<table class="table table-celled table-structured">
  <thead>
    <tr>
      <th rowspan="2">Name</th>
      <th rowspan="2">Type</th>
      <th rowspan="2">Files</th>
      <th colspan="3">Languages</th>
    </tr>
    <tr>
      <th>Ruby</th>
      <th>JavaScript</th>
      <th>Python</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Alpha Team</td>
      <td>Project 1</td>
      <td>2</td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td rowspan="3">Beta Team</td>
      <td>Project 1</td>
      <td>52</td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td>Project 2</td>
      <td>12</td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td>Project 3</td>
      <td>21</td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
  </tbody>
</table>

<br/><br/>
<h3>隔行变色的表格</h3>
<br/><br/>

<table class="table table-striped">
  <thead>
    <tr>
      <th>Name</th>
      <th>Date Joined</th>
      <th>E-mail</th>
      <th>Called</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John Lilki</td>
      <td>September 14, 2013</td>
      <td>jhlilk22@yahoo.com</td>
      <td>No</td>
    </tr>
    <tr>
      <td>Jamie Harington</td>
      <td>January 11, 2014</td>
      <td>jamieharingonton@yahoo.com</td>
      <td>Yes</td>
    </tr>
    <tr>
      <td>Jill Lewis</td>
      <td>May 11, 2014</td>
      <td>jilsewris22@yahoo.com</td>
      <td>Yes</td>
    </tr>
    <tr>
      <td>John Lilki</td>
      <td>September 14, 2013</td>
      <td>jhlilk22@yahoo.com</td>
      <td>No</td>
    </tr>
    <tr>
      <td>John Lilki</td>
      <td>September 14, 2013</td>
      <td>jhlilk22@yahoo.com</td>
      <td>No</td>
    </tr>
    <tr>
      <td>Jamie Harington</td>
      <td>January 11, 2014</td>
      <td>jamieharingonton@yahoo.com</td>
      <td>Yes</td>
    </tr>
    <tr>
      <td>Jill Lewis</td>
      <td>May 11, 2014</td>
      <td>jilsewris22@yahoo.com</td>
      <td>Yes</td>
    </tr>
    <tr>
      <td>John Lilki</td>
      <td>September 14, 2013</td>
      <td>jhlilk22@yahoo.com</td>
      <td>No</td>
    </tr>
  </tbody>
</table>


<br/><br/>
<h3>有边框的表格</h3>
<br/><br/>

<table class="table table-basic">
  <thead>
    <tr>
      <th>Name</th>
      <th>Status</th>
      <th>Notes</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John</td>
      <td>Approved</td>
      <td>None</td>
    </tr>
    <tr>
      <td>Jamie</td>
      <td>Approved</td>
      <td>Requires call</td>
    </tr>
    <tr>
      <td>Jill</td>
      <td>Denied</td>
      <td>None</td>
    </tr>
  </tbody>
</table>

<br/><br/>
<h3>无边框的表格</h3>
<br/><br/>

<table class="table table-very table-basic">
  <thead>
    <tr>
      <th>Name</th>
      <th>Status</th>
      <th>Notes</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John</td>
      <td>Approved</td>
      <td>None</td>
    </tr>
    <tr>
      <td>Jamie</td>
      <td>Approved</td>
      <td>Requires call</td>
    </tr>
    <tr>
      <td>Jill</td>
      <td>Denied</td>
      <td>None</td>
    </tr>
  </tbody>
</table>